<template>
  <div :style="{ fontSize:fontSize + 'px'}">
    <scroller lock-x :height="height">
      <div class="navigotar">
        <div v-for="(item, idx) in data"
             class="card"
             @click="$emit('onClick', idx)"
             :class="{ 'card_active' : item.isActive }">
          <i :class="'iconfont ' + item.icon" 
             :style="{marginLeft: item.icon === 'icon-kaihuzhinan-iocn1' ? '0.1em' : ''}"></i>
          <div>{{item.title}}</div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
  import { Scroller } from 'vux'

  export default {
    name: 'slider-bar',
    components: {
      Scroller
    },
    props: {
      data: {
        type: Array,
        default: []
      },
      height: {
        type: String,
        default: '-61px'
      }
    },
    data () {
      return {
        fontSize: 12
      }
    },
    methods: {

    },
    created () {
      this.fontSize = this.fontSize * document.body.offsetWidth / 320
    }
  }
</script>


<style lang="less" scoped>
.navigotar {
  display: inline-block;
  border-right: 1px solid #EDF1F5;
}
.card:nth-child(1) {
  margin-top: 0.92em;
}
.card {
  display: inline-flex;
  height: 3.75em;
  width: 3.75em;
  background: white;
  border-radius: 0.8rem;
  margin: 0 0.32em 0.72em;
  color: rgba(102,102,102,0.50);
  transition: all 0.3s;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.2em;
  align-items: center;
  div {
    font-size: 0.83em;
    text-align: center;
  }
  i {
    font-size: 2em;
  }
}

.card_active {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
  color: white;
  background-image: linear-gradient(-180deg, #00DEC3 1%, #00CDD4 95%);
}
</style>
